<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>

    body {
      height: 1000px;
    }

    #box1 {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }

    #box2 {
      width: 100px;
      height: 100px;
      background-color: yellow;
      position: absolute;
      left: 200px;
      top: 200px;
    }
  </style>

  <script type="text/javascript">

    window.onload = function() {

      	/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */

      var box1 = document.getElementById("box1");

      box1.onmousedown = function(event) {

        /*
         * setCapture()
         * 	- 只有IE支持，但是在火狐中调用时不会报错，
         * 		而如果使用chrome调用，会报错
         */

        // 设置box1捕获所有鼠标按下的事件
        box1.setCapture && box1.setCapture();
        event = event || window.event;

        // 兼容处理，部分浏览器认为滚动是body的，部分浏览器认为滚动条是html的  document.documentElement => html
        var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

        // 鼠标相对于被移动元素的偏移量在鼠标点击的时候就确定了
        var offsetLeft = event.clientX + scrollLeft - box1.offsetLeft;
        var offsetTop = event.clientY + scrollTop - box1.offsetTop;
        
        // 给document绑定鼠标移动事件
        document.onmousemove = function(event) {
          event = event || window.event;
          var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          var left = event.clientX + scrollLeft - offsetLeft;
          var top = event.clientY + scrollTop - offsetTop;

          // 修改box1的位置
          box1.style.left = left + "px";
          box1.style.top = top + "px";
        }

        // 给document绑定鼠标松开事件，注意
        document.onmouseup = function() {
          // 取消事件
          document.onmousemove = null;
          document.onmouseup = null;
          // 当鼠标松开时，取消对事件的捕获
					box1.releaseCapture && box1.releaseCapture();
        }

        /**
         * 当我们拖拽一个网页的内容时，浏览器默认会去搜索引擎中搜索内容
         * 此时会导致拖拽功能的异常，可以通过return false来取消浏览器这默认行为
         * 但是对IE8不起作用
         */

        return false;
      }
    }

  </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>